feat: Setup new S2 docs website #8300

devongovett · 2025-05-23T22:10:20Z

Sets up new docs website, built using S2 components and Parcel's react server components support. All content and website UI is early and subject to change, but we can get this in as a starting point.

Test old docs, starters, etc. to ensure nothing broke.

# Conflicts: # package.json # packages/@react-spectrum/s2/package.json # packages/dev/parcel-resolver-optimize-locales/package.json # packages/dev/parcel-transformer-s2-icon/package.json # yarn.lock

# Conflicts: # packages/@react-spectrum/s2/package.json # packages/dev/docs/package.json # packages/dev/s2-icon-builder/package.json # yarn.lock

# Conflicts: # packages/@react-spectrum/s2/package.json

# Conflicts: # yarn.lock

REVERT THIS

rspbot · 2025-05-23T23:36:22Z

Build successful! 🎉

This reverts commit 96474a4. # Conflicts: # packages/@react-aria/dnd/stories/Reorderable.tsx

# Conflicts: # packages/dev/s2-docs/package.json # packages/dev/s2-docs/src/CodePlatter.tsx # packages/dev/s2-docs/src/Layout.tsx # packages/dev/s2-docs/src/Nav.tsx # yarn.lock

rspbot · 2025-06-20T19:18:44Z

Build successful! 🎉

rspbot · 2025-06-20T21:47:45Z

Build successful! 🎉

devongovett · 2025-06-20T23:53:46Z

packages/@react-spectrum/s2/src/index.ts

@@ -10,6 +10,8 @@
 * governing permissions and limitations under the License.
 */

+'use client';


due to how our build works, this won't actually affect our released packages at the moment, so it'll only be used by the docs.

so deferring this conversation?

devongovett · 2025-06-20T23:55:06Z

packages/@react-spectrum/s2/src/Modal.tsx

@@ -44,7 +44,8 @@ const modalOverlayStyles = style({
  transitionDuration: {
    default: 250,
    isExiting: 130
-  }
+  },
+  zIndex: 9999


Not sure how we actually want to handle this, but it works for now. Our old isolation: isolate trick doesn't work anymore because there is no top-level provider wrapper around the main page content in S2, so the modals/popovers are siblings of the reset of the page.

ooo, tricky... hmmmm

i know we don't like this, but maybe we should consider having our Provider be mandatory. people are already used to it and seem to be frequently reaching for it anyways.
though a wrench in that is that then if they use both a v3 and s2 provider, they'd get two levels of isolation, shouldn't be a problem, but depends if anything is placed in between

I've also seen groups using a number larger than this one... :(

devongovett · 2025-06-20T23:56:57Z

packages/react-aria-components/src/utils.tsx

@@ -68,16 +68,21 @@ export interface ScrollableProps<T extends Element> {
  onScroll?: (e: UIEvent<T>) => void
 }

+type ClassNameOrFunction<T> = string | ((values: T & {defaultClassName: string | undefined}) => string);
+type StyleOrFunction<T> = CSSProperties | ((values: T & {defaultStyle: CSSProperties}) => CSSProperties | undefined);


This is just to make the types render cleaner in docs prop tables. Actual types haven't changed.

rspbot · 2025-06-20T23:59:49Z

Build successful! 🎉

devongovett · 2025-06-21T00:05:34Z

starters/tailwind/src/AlertDialog.tsx

@@ -1,3 +1,4 @@
+'use client';


added 'use client' to all starter kit examples, which is how users should generally implement our components as well.

rspbot · 2025-06-21T00:56:10Z

Build successful! 🎉

snowystinger

There appears to be an issue with the Style Macro? I tried going to the react aria page for Button, then clicked through the other css options and wound up with a completely black screen.

FYI, this is what it looks like to someone who has scrollbars always on. Happy to help fix after merge.

package.json

snowystinger · 2025-06-22T22:36:16Z

packages/@react-spectrum/s2/src/Modal.tsx

@@ -44,7 +44,8 @@ const modalOverlayStyles = style({
  transitionDuration: {
    default: 250,
    isExiting: 130
-  }
+  },
+  zIndex: 9999


ooo, tricky... hmmmm

i know we don't like this, but maybe we should consider having our Provider be mandatory. people are already used to it and seem to be frequently reaching for it anyways.
though a wrench in that is that then if they use both a v3 and s2 provider, they'd get two levels of isolation, shouldn't be a problem, but depends if anything is placed in between

I've also seen groups using a number larger than this one... :(

snowystinger · 2025-06-22T22:37:44Z

packages/@react-spectrum/s2/src/Picker.tsx

@@ -86,7 +86,6 @@ export interface PickerStyleProps {
  size?: 'S' | 'M' | 'L' | 'XL',
  /**
   * Whether the picker should be displayed with a quiet style.
-   * @private


will need to verify this is actually ready for use

what's not ready about it? It's in Figma, and has been supported for a while. I'm not sure why it was private?

i don't recall doing testing with it, that was all

snowystinger · 2025-06-22T22:38:26Z

packages/@react-spectrum/s2/src/index.ts

@@ -10,6 +10,8 @@
 * governing permissions and limitations under the License.
 */

+'use client';


so deferring this conversation?

packages/dev/parcel-packager-docs/DocsPackager.js

snowystinger · 2025-06-22T23:10:36Z

packages/dev/s2-docs/pages/react-aria/Button.mdx

+Each of these handlers receives a <TypeLink links={typesDocs.links} type={typesDocs.exports.PressEvent} />, which exposes information about the target and the type of event that triggered the interaction.  See [usePress](usePress.html) for more details.
+
+```tsx render
+"use client";


is this for our own rendering? or is this something that users should be paying attention to as well?

snowystinger · 2025-06-22T23:16:07Z

packages/dev/s2-docs/pages/react-aria/Button.mdx

+
+  return (
+    <>
+      <Button


where do the styles for this one come from? I assume Vanilla CSS example which only uses the data-* and dom structure and so that's how it works

snowystinger · 2025-06-23T00:11:26Z

packages/dev/s2-docs/src/zip.tsx

@@ -0,0 +1,89 @@
+// https://gist.github.com/rvaiya/4a2192df729056880a027789ae3cd4b7
+// Author: Raheman Vaiya
+// License: WTFPL


add to LICENSE?

scripts/buildRegistry.mjs

rspbot · 2025-06-23T18:00:59Z

Build successful! 🎉

reidbarber · 2025-06-23T18:13:36Z

packages/dev/s2-docs/package.json

+    "generate:og": "node scripts/generateOg.mjs",
+    "generate:md": "node scripts/generateMd.mjs"


Ideally we'll run these with the docs build. I should also give these better names.

reidbarber · 2025-06-23T20:36:26Z

packages/dev/s2-docs/src/Tabs.tsx

+/**
+ * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.
+ */
+export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLDivElement>) {


TODO: update to match the latest S2 tabs code.

reidbarber · 2025-06-23T20:44:31Z

packages/dev/s2-docs/src/SearchResultsMenu.tsx

+                        <MenuItem key={item.id} id={item.id} href={`/${libraryKey}/${item.name}.html`} aria-label={item.name} textValue={item.name}>
+                          {item.thumbnail && <Image src={item.thumbnail.toString()} alt={item.name} />}
+                          <Text slot="label">{item.name}</Text>
+                          {item.description && <Text slot="description">{item.description}</Text>}
+                        </MenuItem>


TODO: add real thumbnails and descriptions

reidbarber · 2025-06-23T20:54:23Z

packages/dev/s2-docs/src/CodePlatter.tsx

+
+                    let a = document.createElement('a');
+                    a.href = URL.createObjectURL(blob);
+                    a.download = 'example.zip';


Custom name based on section title?

devongovett added 24 commits March 20, 2025 11:23

wip

f09c1a5

sidenav

bac6c20

Merge branch 'main' of github.com:adobe/react-spectrum into s2-docs2

9221705

bump parcel

cab4121

wip

baecba8

wip

f583194

19.1

6c15ea1

wip

f1e4055

more wip

e595703

Merge branch 'main' of github.com:adobe/react-spectrum into s2-docs2

28a4099

# Conflicts: # package.json # packages/@react-spectrum/s2/package.json # packages/dev/parcel-resolver-optimize-locales/package.json # packages/dev/parcel-transformer-s2-icon/package.json # yarn.lock

wip

9ca4746

Merge branch 'main' of github.com:adobe/react-spectrum into s2-docs2

8becd12

# Conflicts: # packages/@react-spectrum/s2/package.json # packages/dev/docs/package.json # packages/dev/s2-icon-builder/package.json # yarn.lock

Merge branch 'main' of github.com:adobe/react-spectrum into s2-docs2

53b3153

# Conflicts: # packages/@react-spectrum/s2/package.json

Merge branch 'main' of github.com:adobe/react-spectrum into s2-docs2

ee7c836

# Conflicts: # yarn.lock

Merge branch 'main' of github.com:adobe/react-spectrum into s2-docs2

31fb448

cleanup

b932653

build in circleci

1bedcec

yarn is a jerk

1d63a4e

update parcel to latest

8acc9c4

gdi yarn

3f6a70d

temporarily fix self reference resolution

96474a4

REVERT THIS

fixes

c95b7c4

dedupe lightningcss

c36c7e8

lint

76716d9

devongovett added 2 commits May 24, 2025 10:24

Revert "temporarily fix self reference resolution"

dd85983

This reverts commit 96474a4. # Conflicts: # packages/@react-aria/dnd/stories/Reorderable.tsx

bump parcel

5bd60e1

This comment was marked as off-topic.

Sign in to view

devongovett added 2 commits May 27, 2025 11:19

Merge branch 'main' of github.com:adobe/react-spectrum into s2-docs2

2379778

reorganize

e67eeb6

devongovett added 4 commits June 20, 2025 10:33

Merge branch 's2-docs2' into s2-docs-3

cea28cd

# Conflicts: # packages/dev/s2-docs/package.json # packages/dev/s2-docs/src/CodePlatter.tsx # packages/dev/s2-docs/src/Layout.tsx # packages/dev/s2-docs/src/Nav.tsx # yarn.lock

fixes

76c6dea

layout chaneg

7b3ac32

lint

3cd6227

devongovett added 2 commits June 20, 2025 13:49

build registry in ci

ac2d1c9

add correct registry url

9048375

upgrade parcel

422fd4a

devongovett commented Jun 20, 2025

View reviewed changes

devongovett marked this pull request as ready for review June 21, 2025 00:01

devongovett commented Jun 21, 2025

View reviewed changes

fix scrolling

1563dff

snowystinger approved these changes Jun 23, 2025

View reviewed changes

Merge branch 'main' into s2-docs2

1fe7086

This comment was marked as off-topic.

Sign in to view

reidbarber reviewed Jun 23, 2025

View reviewed changes

reidbarber approved these changes Jun 23, 2025

View reviewed changes

devongovett added this pull request to the merge queue Jun 23, 2025

reidbarber reviewed Jun 23, 2025

View reviewed changes

Merged via the queue into main with commit ef071a5 Jun 23, 2025
31 checks passed

devongovett deleted the s2-docs2 branch June 23, 2025 20:52

reidbarber reviewed Jun 23, 2025

View reviewed changes

		"generate:og": "node scripts/generateOg.mjs",
		"generate:md": "node scripts/generateMd.mjs"

feat: Setup new S2 docs website #8300

feat: Setup new S2 docs website #8300

Conversation

devongovett commented May 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rspbot commented May 23, 2025

Uh oh!

This comment was marked as off-topic.

rspbot commented Jun 20, 2025

Uh oh!

rspbot commented Jun 20, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Jun 20, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Jun 21, 2025

Uh oh!

snowystinger left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

rspbot commented Jun 23, 2025

Uh oh!

This comment was marked as off-topic.

reidbarber Jun 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

devongovett commented May 23, 2025 •

edited

Loading

reidbarber Jun 23, 2025 •

edited

Loading